<template>
  <el-scrollbar>
    <div class="pt-[var(--el-header-height)] text-center">
      <logo-navi></logo-navi>
      <blockquote>演示复杂样式特效</blockquote>
      <div class="flex justify-center items-center">
        <h1 class=""><i-fa-home /></h1>
        <h1
          class="flex items-center bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-green-500 hover:from-blue-500 hover:via-green-500 hover:to-red-500"
        >
          Vite + Vue
          <span class="mdi mdi-microsoft-windows"></span>
        </h1>
      </div>
      <p>
        基于
        <a href="https://cn.vuejs.org/guide/quick-start.html" target="_blank">
          create-vue
        </a>
        , 官方的 Vue + Vite 模版
      </p>
      <p>
        给你的编辑器安装
        <a href="https://github.com/johnsoncodehk/volar" target="_blank"
          >Volar
        </a>
        插件，提升开发体验
      </p>
      <p>更多编辑器插件和模版功能见文档</p>
      <blockquote>
        点击 Vite 和 Vue 的标志切换页面，左边是演示，右边是文档
      </blockquote>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts"></script>

<style scoped></style>
